<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //Object.assign(目标对象，源对象1,源对象2,……)用来合并对象
        //返回的是目标对象
        const apple = {
            color: '红色',
            shape: '圆形',
            taste: '甜'
        }
        const pen = {
            color: '黑色',
            shape: '圆柱形',
            use: '写字'
        }

        //Object.assign()直接合并到了第一个参数中，返回的就是合并之后的对象
        console.log(Object.assign(apple, pen));

        console.log(apple === Object.assign(apple, pen)); //true

        //可以合并多个对象
        console.log(Object.assign({}, apple, pen))

        //    console.log({...apple,
        //        ...pen
        //    }); //返回结果：新的对象

        //基本数据类型作为源对象
        //与对象的展开相似 先转换成对象再合并
        console.log(Object.assign({}, undefined)); //{}
        console.log(Object.assign({}, null)); //{}
        console.log(Object.assign({}, 1)); //{}
        console.log(Object.assign({}, 'str')); //{0: 's', 1: 't', 2: 'r'}

        // 同名属性的替换：后面的属性会替换掉前面的属性

        const apple1 = {
            color: ['红色', '蓝色'],
            shape: '圆形',
            taste: '甜'
        }
        const pen1 = {
            color: ['黑色', '金色'],
            shape: '圆柱形',
            use: '写字'
        }

        console.log(Object.assign({}, apple1, pen1))

        //合并默认参数和默认参数
        const logUser = userOptions => {
                const Default = {
                    username: 'Zhangsan',
                    age: 0,
                    sex: 'male'
                }
                const options = Object.assign({},
                    Default, userOptions);
                console.log(options);
            }
            //logUser();

        logUser({
            username: 'Cai'
        })
    </script>

</body>

</html>